import React, {
    Component
} from 'react';
import {
    Text,
    FlatList,
    RefreshControl,
    View,
    StyleSheet,
    Image,
    ActionSheetIOS,
    AlertIOS,
    InteractionManager,
    TouchableOpacity,
    NativeModules
} from 'react-native';
import NetUtil from '../../common/NetUtil';
import config from '../../config/config';
import commonStyles from '../../styles/commonstyles';

import CLNavigatorHeader from '../../component/CLNavigatorHeader'
import {getProductCategorys, chooseCategory} from './actions';

import ProductListItem from './productListItem';

import {connect} from 'react-redux';

import {naviPush, naviBack} from '../../navigatorApp/actions'

class ProductCategory extends Component {

    static navigationOptions = ({navigation, screenProps}) => ({
        header: <CLNavigatorHeader navigation={navigation} title="选择类别"
        />,
    });

    constructor(props) {
        super(props);

        this.catId = props.navigation.state.params.catId;

        this.state = {
            category1: "",
            category2: "",
            category3: ""
        }
    }

    componentDidMount() {
        InteractionManager.runAfterInteractions(() => {
            this.props.getProductCategorys(this.catId);
        });
    }

    _chooseCategory = (item) => {
        this.props.getProductCategorys(item.catId, () => {
            this.props.chooseCategory(item);
            this.props.naviBack();
        });
    };

    _renderItem = ({item}) => {
        return <TouchableOpacity onPress={() => {
            this._chooseCategory(item)
        }}>
            <View style={{height: 50, justifyContent: 'center'}}>
                <Text style={{fontSize: 16, marginLeft: 10}}>{item.catName}</Text>
            </View>
        </TouchableOpacity>
    };

    _sepa = () => {
        return (<View style={{height: 1, backgroundColor: '#eee'}}></View>)
    }

    render() {
        return <View style={{flex: 1, backgroundColor: "white"}}>
            <FlatList
                style={{flex: 1}}
                ItemSeparatorComponent={this._sepa}
                data={this.props.productCategorys}
                renderItem={this._renderItem}
            />
        </View>
    }
}

const mapStateToProps = (state) => {
    return {
        token: state.mainmodel.token,
        productCategorys: state.product.productCategorys,
    }
};

const mapDispatchToProps = (dispatch) => {
    return {
        naviPush: (routerName) => {
            dispatch(naviPush(routerName));
        },
        naviBack: (routerName) => {
            dispatch(naviBack(routerName));
        },
        getProductCategorys: (pid, callback) => {
            dispatch(getProductCategorys(pid, callback));
        },
        chooseCategory: (item) => {
            dispatch(chooseCategory(item));
        }
    }
}

export default connect(
    mapStateToProps,
    mapDispatchToProps,
)(ProductCategory);
